import { SvgIcon } from '@/components/icon';
import NotData from '@/components/NotData';
import useWindowWidth from '@/hooks/event/use-window-width';
import { useParams } from '@/router/hooks';
import { Input, Spin } from 'antd';
import { useEffect, useRef, useState } from 'react';
import { removeRefTags } from '@/utils/regexRules';
import dayjs from 'dayjs';

interface HistoryChatProps {
  chatHistory: any;
  hasMore?: boolean;
  loading?: boolean;
  onInputChange?: (event: any) => void;
  handleChatItemClick?: (msg: any) => void;
  deleteHistoryDialogue?: (event: any, data: any) => void;
}

export default function HistoryLog({
  chatHistory,
  hasMore = false,
  loading = false,
  onInputChange,
  handleChatItemClick,
  deleteHistoryDialogue,
}: HistoryChatProps) {
  const { isPc } = useWindowWidth();
  const historyListRef = useRef<HTMLDivElement>(null);
  const [isInChatPage, setIsInChatPage] = useState<boolean>(false);
  const { chatId } = useParams() as { appId: string; chatId: string };

  useEffect(() => {
    const isChatPath = location.pathname.includes('/apps/chat');
    setIsInChatPage(isChatPath);
  }, [location.pathname, setIsInChatPage]);
  return (
    <div>
      <div>
        <Input
          onChange={onInputChange}
          style={
            !isPc
              ? {
                  height: '40px',
                  width: '100%',
                  borderRadius: '6px',
                }
              : {}
          }
          placeholder="搜索"
          prefix={<SvgIcon icon="work-ic6" size={isPc ? 16 : 20} />}
        />
      </div>

      <div
        className="h-[85vh] overflow-auto [scrollbar-width:none] "
        ref={historyListRef}
        style={{
          // maxHeight: isPc ? 'calc(100vh - 280px)' : 'calc(100vh - 200px)',
          maxHeight: isPc
            ? isInChatPage
              ? 'calc(100vh - 180px)'
              : 'calc(100vh - 180px)'
            : 'calc(100vh - 0px)',
          overflowY: 'auto',
          // paddingTop: '20px',
          scrollbarWidth: 'none' /* Firefox */,
          msOverflowStyle: 'none' /* IE and Edge */,
        }}
      >
        {chatHistory.length === 0 && !hasMore ? (
          <NotData iconSize={80} textClassName={'text-sm'} />
        ) : (
          <div>
            {chatHistory.map((day: any, dateIndex: number) => (
              <>
                {day.child.map((msg: any, msgIndex: number) => {
                  return (
                    <div
                      key={msgIndex}
                      className={`my-3 rounded-default border-b bg-[#FFF] ${isPc ? 'p-4' : 'p-2'}`}
                      style={
                        chatId == msg._id && isPc
                          ? {
                              border: '2px solid var(--brand-color)',
                              borderRadius: '6px',
                            }
                          : {
                              borderColor: 'transparent',
                              borderWidth: '2px',
                              borderStyle: 'solid',
                            }
                      }
                    >
                      <div
                        key={msgIndex}
                        className="cursor-pointer  "
                        onClick={() => handleChatItemClick && handleChatItemClick(msg)}
                      >
                        {/* <span className="text-sm font-semibold">{msg.title}</span> */}
                        <div
                          id="highlight"
                          className="truncate text-sm font-font-weight-600 text-text-5"
                          dangerouslySetInnerHTML={{ __html: removeRefTags(msg?.title) }}
                        ></div>
                        <div className="mt-2 flex items-center justify-between">
                          <span className=" !text-xs text-text-3">
                            {' '}
                            {dayjs(msg.time).format('YYYY-MM-DD')}
                          </span>
                          <div
                            onClick={(e) => deleteHistoryDialogue && deleteHistoryDialogue(e, msg)}
                            className=" flex h-6  w-6 items-center justify-center text-text-3 hover:rounded-md hover:bg-fill-2 hover:!text-text-5 "
                          >
                            <SvgIcon icon="fusion-delete" size={16} />
                          </div>
                        </div>
                      </div>
                      <div>
                        {msg?.highlight_content && (
                          <div
                            id="highlight"
                            style={{
                              width: '100%',
                              flex: 1,
                              overflow: 'hidden',
                              whiteSpace: 'nowrap',
                              textOverflow: 'ellipsis',
                              fontSize: '12px',
                              marginTop: '5px',
                              maxHeight: '20px',
                              lineHeight: '20px',
                            }}
                            dangerouslySetInnerHTML={{
                              __html: removeRefTags(msg?.highlight_content),
                            }}
                          ></div>
                        )}
                      </div>
                    </div>
                  );
                })}
              </>
            ))}
          </div>
        )}

        {loading && (
          <div className="py-4 text-center">
            <Spin />
          </div>
        )}
      </div>
    </div>
  );
}
